let Utils = require("../../framework/js/utils");

let layouttransform = `
<div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item aui-col-xs-12">   
        <h5>grid flex版</h5>
        <hr better/>
    </div>
</div>
<div class="aui-easy-grid">
    <div class="aui-layout aui-layout-grid aui-xs-flex">
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 170px">col-xs-12 col-md-6 col-lg-auto</div></div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 140px">col-xs-12 col-md-6 col-lg-auto</div></div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 140px">col-xs-12 col-md-6 col-lg-auto</div></div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 140px">col-xs-12 col-md-6 col-lg-auto</div></div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 140px">col-xs-12 col-md-6 col-lg-auto</div></div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 140px">col-xs-12 col-md-6 col-lg-auto</div></div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto" style="margin-left: auto"><div style="width: 140px">col-xs-12 col-md-6 col-lg-auto</div></div>
    </div>
</div>
<div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item aui-col-xs-12">   
        <h5>左右对齐</h5>
        <hr better/>
    </div>
</div>
<div class="aui-easy-grid nomargin">
    <div class="aui-layout aui-layout-grid aui-align-justify">
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 170px">col-xs-12 col-md-6 col-lg-auto</div></div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 140px">col-xs-12 col-md-6 col-lg-auto</div></div>                        
    </div>
</div>
<div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item aui-col-xs-12">   
        <h5>左中右</h5>
        <hr better/>
    </div>
</div>
<div class="aui-easy-grid nomargin">
    <div class="aui-layout aui-layout-grid aui-align-justify align-item-center">
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 290px;">col-xs-12 col-md-6 col-lg-auto</div></div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 140px">col-xs-12 col-md-6 col-lg-auto</div></div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 140px">col-xs-12 col-md-6 col-lg-auto</div></div>           
    </div>
</div>
`;

class UiExampleGrid extends window.AUI.BaseComponent {
    constructor(name) {
        super(name);
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
<div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item aui-col-xs-12">   
        <h5>使用于制作宫格</h5>
        <hr better/>
    </div>
</div>
<div class="aui-easy-grid">
    <div class="aui-layout aui-layout-grid">
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-3">col-xs-12 col-md-6 col-lg-3</div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-3">col-xs-12 col-md-6 col-lg-3</div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-3">col-xs-12 col-md-6 col-lg-3</div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-3">col-xs-12 col-md-6 col-lg-3</div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-3">col-xs-12 col-md-6 col-lg-3</div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-3">col-xs-12 col-md-6 col-lg-3</div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-3">col-xs-12 col-md-6 col-lg-3</div>
    </div>
</div>
<div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item aui-col-xs-12">   
        <h5>pc端auto</h5>
        <hr better/>
    </div>
</div>
<div class="aui-easy-grid">
    <div class="aui-layout aui-layout-grid">
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 170px">col-xs-12 col-md-6 col-lg-auto</div></div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 140px">col-xs-12 col-md-6 col-lg-auto</div></div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 140px">col-xs-12 col-md-6 col-lg-auto</div></div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 140px">col-xs-12 col-md-6 col-lg-auto</div></div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 140px">col-xs-12 col-md-6 col-lg-auto</div></div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 140px">col-xs-12 col-md-6 col-lg-auto</div></div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-6 aui-col-lg-auto"><div style="width: 140px">col-xs-12 col-md-6 col-lg-auto</div></div>
    </div>
</div>
${layouttransform}
<div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item aui-col-xs-12">
        <h5>使用于制作表单</h5>
        <hr better/>
    </div>
</div> 
<form class="form-validation" action="">
<div class="form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right">
    label
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <input class="form-control" type="text">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    help-block
</div>
</div>
</div>
</form>
<div class="aui-layout aui-layout-grid">
<div class="aui-layout__item aui-col-xs-12">
<aui-codeshow ref="code" language="html" :value="field"></aui-codeshow>
</div>
</div>
<div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item aui-col-xs-12">
        <h5>文档</h5>
        <hr better/>
        <script type="x-template" id="uigriddoc">### grid的媒体断点        
    $aui-grid-media-sm: "(min-width:768px)";
    $aui-grid-media-md: "(min-width:991px)";
    $aui-grid-media-lg: "(min-width:1200px)";
    
</script>
    </div>  
</div> 
<aui-markdown :value="doc"></aui-markdown>
</div>`;
    }
    _mounted() {
        var self = this;
        self.doc = document.getElementById("uigriddoc").innerHTML.trim();

        window.AUI.Loader.loadScript(
            {
                src: "//cdn.bootcss.com/prism/9000.0.1/prism.min.js",
                dataManual: true
            }
        ).then(function () {
            self.$refs.code.highlight();
        });
    }
    _data() {
        var ret = {};
        ret.doc = '';
        ret.field = `<div class="form-group">
    <div class="aui-layout aui-layout-grid align-item-center">
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
            label
        </div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
            <input class="form-control" type="text">
        </div>
        <div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
            help-block
        </div>
    </div>
</div>`;
        return ret;
    }
}

window.AUI.customCompoents.define("ui-example-grid", UiExampleGrid);

module.exports = {
    template: `
        <div class="anu-subpage" style="width: 100%;">          
            <ui-example-grid></ui-example-grid>
        </div>
    `,
    data() {
        var ret = {};
        return ret;
    },
    mounted() {
        var self = this;
        rootcontroller.getPage(self).attachChildComponentReady();
    },
    methods: {
        service() {
        },
        onError(e) {
            console.log('-------------------');
            console.log(e);
            console.log('-------------------');
        }
    }
};